@import url("./font.css");
@import url("./animated.css");

view, text {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 28rpx; /* Changed from 0 to base font size */
}

page {
	background: #1a1a1a; /* Changed from light to dark background */
	color: #fff; /* Default text color */
}

button::after {
	border: none;
}

/* Utility Classes - Updated colors to match dark theme */
.over-hide { overflow: hidden; }

/* Flexbox Utilities - Unchanged */
.flex { display: flex; }
.flex.space { justify-content: space-between; }
.flex.center { justify-content: center; }
.flex.alcenter { align-items: center; }
.flex.alend { align-items: flex-end; }
.flex.start { justify-content: flex-start; }
.flex.end { justify-content: flex-end; }
.flex.wrap { flex-direction: row; flex-wrap: wrap; }
.flex .col1 { width: 100%; }
.flex .col2 { width: 50%; }
.flex .col3 { width: 33.33%; }
.flex .col4 { width: 25%; }
.flex .col5 { width: 20%; }

/* Font Sizes - Unchanged */
.ft12 { font-size: 24rpx; }
.ft14 { font-size: 28rpx; }
.ft16 { font-size: 32rpx; }
.ft18 { font-size: 36rpx; }
.ft20 { font-size: 40rpx; }
.ft22 { font-size: 44rpx; }
.ft24 { font-size: 48rpx; }
.ft28 { font-size: 56rpx; }
.ft32 { font-size: 64rpx; }
.ft36 { font-size: 72rpx; }
.ft40 { font-size: 80rpx; }
.ft50 { font-size: 100rpx; }
.ft60 { font-size: 120rpx; }
.ft80 { font-size: 160rpx; }

/* Font Weights - Unchanged */
.ftw400 { font-weight: 400; }
.ftw500 { font-weight: 500; }
.ftw600 { font-weight: 600; }
.ft-italic { font-style: italic; }

/* Text Utilities - Unchanged */
.text-over { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-over1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-over2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.text-over3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.text-over4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.text-over5 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.text-over6 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.text-over7 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.text-over8 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-line { text-decoration: line-through; }
.text-line-down { text-decoration: underline; }

/* Line Heights - Unchanged */
.lh16 { line-height: 32rpx; }
.lh18 { line-height: 36rpx; }
.lh20 { line-height: 40rpx; }
.lh22 { line-height: 44rpx; }
.lh24 { line-height: 48rpx; }
.lh26 { line-height: 52rpx; }
.lh28 { line-height: 56rpx; }
.lh30 { line-height: 60rpx; }
.lh32 { line-height: 64rpx; }
.lh36 { line-height: 72rpx; }
.lh40 { line-height: 80rpx; }

/* Color Classes - Updated for dark theme */
.cl-w { color: #FFFFFF; }
.cl-w9 { color: rgba(255, 255, 255, 0.9); }
.cl-w8 { color: rgba(255, 255, 255, 0.8); }
.cl-main { color: #FFD600; } /* Changed to gold/yellow accent */
.cl-default { color: #FFFFFF; } /* Changed from black to white */
.cl-info2 { color: #AEB2C1; } /* Lighter text color */
.cl-info { color: #888888; } /* Medium gray */
.cl-placeholder { color: #555555; } /* Darker placeholder */
.cl-light { color: #E4E6ED; }
.cl-notice { color: #AEB2C1; }
.cl-price { color: #FF3D3D; }

.cl-yellow { color: #FFD600; } /* Gold accent */
.cl-green { color: #00C657; }
.cl-manage { color: #5E40FF; }
.cl-orange { color: #FF6600; }
.cl-blue { color: #1890FF; }

/* Background Classes - Updated for dark theme */
.bg-w { background: #2a2a2a; } /* Changed from white to dark gray */
.bg-default { background: #1a1a1a; } /* Dark background */
.bg-manage { background: #5E40FF; }

/* Margin Utilities - Unchanged */
.mt2 { margin-top: 4rpx; }
.mt4 { margin-top: 8rpx; }
.mt5 { margin-top: 10rpx; }
.mt6 { margin-top: 12rpx; }
.mt7 { margin-top: 15rpx; }
.mt8 { margin-top: 16rpx; }
.mt10 { margin-top: 20rpx; }
.mt12 { margin-top: 24rpx; }
.mt14 { margin-top: 28rpx; }
.mt15 { margin-top: 30rpx; }
.mt16 { margin-top: 32rpx; }
.mt18 { margin-top: 36rpx; }
.mt20 { margin-top: 40rpx; }
.mt24 { margin-top: 48rpx; }
.mt25 { margin-top: 50rpx; }
.mt30 { margin-top: 60rpx; }
.mt32 { margin-top: 64rpx; }
.mt40 { margin-top: 80rpx; }
.mt60 { margin-top: 120rpx; }

.mb4 { margin-bottom: 8rpx; }
.mb5 { margin-bottom: 10rpx; }
.mb7 { margin-bottom: 15rpx; }
.mb10 { margin-bottom: 20rpx; }
.mb15 { margin-bottom: 30rpx; }
.mb16 { margin-bottom: 32rpx; }
.mb20 { margin-bottom: 40rpx; }
.mb24 { margin-bottom: 48rpx; }
.mb25 { margin-bottom: 50rpx; }
.mb30 { margin-bottom: 60rpx; }

.ml4 { margin-left: 8rpx; }
.ml5 { margin-left: 10rpx; }
.ml7 { margin-left: 15rpx; }
.ml10 { margin-left: 20rpx; }
.ml15 { margin-left: 30rpx; }
.ml20 { margin-left: 40rpx; }
.ml25 { margin-left: 50rpx; }
.ml30 { margin-left: 60rpx; }
.ml60 { margin-left: 120rpx; }

.mr5 { margin-right: 10rpx; }
.mr7 { margin-right: 15rpx; }
.mr10 { margin-right: 20rpx; }
.mr15 { margin-right: 30rpx; }
.mr20 { margin-right: 40rpx; }
.mr25 { margin-right: 50rpx; }
.mr30 { margin-right: 60rpx; }
.mr60 { margin-right: 120rpx; }

/* Padding Utilities - Unchanged */
.pt5 { padding-top: 10rpx; }
.pt10 { padding-top: 20rpx; }
.pt12 { padding-top: 24rpx; }
.pt15 { padding-top: 30rpx; }
.pt16 { padding-top: 32rpx; }
.pt18 { padding-top: 36rpx; }
.pt20 { padding-top: 40rpx; }
.pt24 { padding-top: 48rpx; }
.pt30 { padding-top: 60rpx; }
.pt32 { padding-top: 64rpx; }
.pt40 { padding-top: 80rpx; }
.pt60 { padding-top: 120rpx; }
.pt80 { padding-top: 160rpx; }

.pb5 { padding-bottom: 10rpx; }
.pb10 { padding-bottom: 20rpx; }
.pb12 { padding-bottom: 24rpx; }
.pb15 { padding-bottom: 30rpx; }
.pb16 { padding-bottom: 32rpx; }
.pb20 { padding-bottom: 40rpx; }
.pb24 { padding-bottom: 48rpx; }
.pb30 { padding-bottom: 60rpx; }
.pb32 { padding-bottom: 64rpx; }

.pd5 { padding: 10rpx; }
.pd10 { padding: 20rpx; }
.pd15 { padding: 30rpx; }
.pd20 { padding: 40rpx; }
.pd30 { padding: 60rpx; }
.pd32 { padding: 64rpx; }

.plr5 { padding: 0rpx 10rpx; }
.plr10 { padding: 0rpx 20rpx; }
.plr15 { padding: 0rpx 30rpx; }
.plr20 { padding: 0rpx 40rpx; }
.plr30 { padding: 0rpx 60rpx; }
.plr40 { padding: 0rpx 80rpx; }

.pr5 { padding-right: 10rpx; }
.pr10 { padding-right: 20rpx; }
.pr15 { padding-right: 30rpx; }
.pr20 { padding-right: 40rpx; }
.pr30 { padding-right: 60rpx; }

.pl5 { padding-left: 10rpx; }
.pl10 { padding-left: 20rpx; }
.pl15 { padding-left: 30rpx; }
.pl20 { padding-left: 40rpx; }
.pl30 { padding-left: 60rpx; }

.pd0_15 { padding: 0px 30rpx; }
.pd5_15 { padding: 10rpx 30rpx; }
.pd10_15 { padding: 20rpx 30rpx; }
.pd12_10 { padding: 24rpx 20rpx; }
.pd20_15 { padding: 40rpx 30rpx; }
.pd16_15 { padding: 32rpx 30rpx; }
.pd16_20 { padding: 32rpx 40rpx; }
.pd24_15 { padding: 48rpx 30rpx; }
.pd24_20 { padding: 48rpx 40rpx; }

/* Transform Utilities - Unchanged */
.scale6 { transform: scale(.6); }
.scale8 { transform: scale(.8); }

/* Opacity Utilities - Unchanged */
.op3 { opacity: .3; }
.op5 { opacity: .5; }
.op8 { opacity: .8; }
.op9 { opacity: .9; }

/* Picker Styles - Updated for dark theme */
.picker-view {
	height: 400rpx;
	background: #2a2a2a;
}
.picker-view .item {
	line-height: 100rpx;
	font-size: 32rpx;
	color: #FFFFFF;
}

/* Box Styles - Updated for dark theme */
.box {
	width: 100%;
	background: #2a2a2a; /* Changed from white to dark gray */
	box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.2); /* Darker shadow */
	border-radius: 32rpx;
}
.box.noshadow { box-shadow: none; }

/* Border Styles - Updated for dark theme */
.bd-line {
	height: 2rpx;
	width: 100%;
	background: rgba(255, 255, 255, 0.1); /* Lighter border for dark theme */
}
.bd-bottom {
	border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
}
.bd-left {
	border-left: 2rpx solid rgba(255, 255, 255, 0.1);
}

/* Form Footer - Updated for dark theme */
.form-footer-h {
	height: 140rpx;
	height: calc(140rpx + constant(safe-area-inset-bottom));
	height: calc(140rpx + env(safe-area-inset-bottom));
}
.form-footer {
	width: 100%;
	position: fixed;
	z-index: 10;
	left: 0;
	bottom: 0;
	background: #2a2a2a; /* Dark background */
	box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.2);
}
.form-footer-main {
	width: 100%;
	height: 140rpx;
}
.form-footer-item {
	padding: 0;
	margin: 0;
	background: transparent;
	line-height: 1;
	color: #AEB2C1;
}

/* Button Styles - Updated for dark theme */
.btn-big, .btn-manage, .btn-mid, .btn-manage-mid, .btn-small, .btn-mini, .btn-manage-small, .btn-manage-mini {
	width: 100%;
	height: 88rpx;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #FFFFFF; /* Changed from black to white */
	background: #5E40FF; /* Changed from white to purple */
	margin: 0;
	padding: 0;
	transition: all 0.4s;
}
.btn-big.dis, .btn-manage.dis, .btn-mid.dis, .btn-manage-mid.dis, .btn-small.dis, .btn-mini.dis, .btn-manage-small.dis, .btn-manage-mini.dis {
	background: #333333;
	color: #666666;
}

.btn-manage, .btn-manage-mid, .btn-manage-small, .btn-manage-mini {
	background: #FFD600; /* Gold accent */
	color: #000000;
}
.btn-mid, .btn-manage-mid {
	width: 300rpx;
	height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
}
.btn-manage.plan, .btn-manage-mid.plan, .btn-manage-small.plan, .btn-manage-mini.plan {
	border: 2rpx solid #FFD600;
	background: transparent;
	color: #FFD600;
}
.btn-big.plan, .btn-mid.plan, .btn-small.plan, .btn-mini.plan {
	border: 2rpx solid #555555;
	background: transparent;
	color: #FFFFFF;
}
.btn-small, .btn-mini, .btn-manage-small, .btn-manage-mini {
	width: 176rpx;
	font-size: 28rpx;
	height: 64rpx;
	border-radius: 32rpx;
}
.btn-mini, .btn-manage-mini {
	width: 120rpx;
}

/* Loading Animation - Updated for dark theme */
.loading_page {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #1a1a1a; /* Dark background */
}
.loading_page image {
	width: 58rpx;
	height: 58rpx;
	position: relative;
	margin-top: 100rpx;
	/* #ifdef h5 */
	margin-top: 0;
	/* #endif */
}